<script setup lang="ts">
import { onMounted, ref } from "vue";
const { $axios } = useNuxtApp();
const {locale, setLocale, tm} = useI18n()
const seo_title = computed(() => {
  return tm("shop.seo.title");
})
const seo_ogTitle = computed(() => {
  return tm("shop.seo.ogTitle");
})
const seo_description = computed(() => {
  return tm("shop.seo.description");
})
const seo_ogDescription = computed(() => {
  return tm("shop.seo.ogDescription");
})

const swiperData = ref<any>({ imgs: [], name: "", desc: "" });

// 首页数据获取
const fetchSwiperData = async () => {
  try {
    // GET请求
    const { isSuccess, data } = await $axios.get<any>(
      "/getSwiperByType?type=7"
    );

    if (isSuccess) {
      swiperData.value = data;
      // SEO 会根据中英文切换做不同的SEO
      useSeoMeta({
        keywords: swiperData.value.seoKeywords || tm("shop.seo.keywords"),
        title: swiperData.value.seoTitle || seo_title,
        ogTitle: swiperData.value.seoTitle || seo_ogTitle,
        description: swiperData.value.seoDesc || seo_description,
        ogDescription: swiperData.value.seoDesc || seo_ogDescription,
        ogImage: 'https://oss-cdn.tearful.cn/shop/banner/AP_memorial_day_sale_BANNERSv2-01_2048x2048.webp'
      })
      
    }

    console.log("获取数据成功 => ", swiperData.value);

    // POST请求示例
    // const result = await $axios.post('/users', { name: 'test', email: 'test@example.com' })
  } catch (error) {
    console.error("请求失败", error);
  }
};

onMounted(() => {
  // console.log("videos页面接受路由参数query", routeData)
  fetchSwiperData();
});
</script>

<template>
  <v-app>
    <!--    原：<v-sheet color="#F5F4F2">，去掉  color="#F5F4F2"  -->
    <v-sheet>
      <v-sheet color="transparent" class="pt-[72px]">
        <banner-image
          :HeadImage="swiperData.imgs[0] ? swiperData.imgs[0].url : ''"
          :HeadLabel="swiperData.name"
          :SubLabel="swiperData.desc"
        />
      </v-sheet>
      <div class="d-flex justify-center py-16">
        <v-sheet color="transparent" class="w-[90%]">
          <v-row>
            <v-col md="12" cols="12" class="">
              <v-sheet
                color="transparent"
                class="d-flex flex-column text-center"
              >
                <div
                  class="ql-editor"
                  v-html="swiperData.content"
                ></div>
              </v-sheet>
            </v-col>
          </v-row>
        </v-sheet>
      </div>
    </v-sheet>
  </v-app>
</template>

<style scoped>
</style>